<template>
    <fieldset>
        <legend>登入页</legend>
        用户名:
        <input type="text" v-model="username">
        <br>
        密码:
        <input type="password" v-model="password" @keydown.enter="login">
        <button @click="login">登入</button>
    </fieldset>
</template>
<script setup>
import {ref} from "vue"
import * as api from "../../api/users"
import {useRouter,onBeforeRouteLeave,onBeforeRouteUpdate} from "vue-router"
//1.获取输入框中的用户名和密码
let username = ref("")
let password = ref("")

//2.发起请求，请求登入

let router = useRouter()

let login = async() => {
    let res = await api.loginApi(username.value,password.value)

    //服务器会返回token,这个token是个令牌,这个令牌需要保存在本地，后续请求的时候带上令牌，就能随意访问服务器的数据了

    //1.localStorage 关掉页面，只要token还具备时效性，那么就能访问其它页面，不需要重新登入 
    //2.sessStorage  用户关掉页面，token就被清除，不管它还生不生效，重新打开页面，用户重新登入

    if(res.data.state){
        //将token存到本地
        sessionStorage.setItem('qf-token',res.data.token)
        //页面要进行跳转
        router.push("/")
    }else{
        alert(res.data.msg)
    }

    console.log(res)
}
//3.判定请求成功和请求失败的情况

//组件独享钩子

onBeforeRouteLeave(()=>{
    console.log("路由离开登入页面")
})
onBeforeRouteUpdate(()=>{
    console.log("路由更新")
})
</script>